<template>

  <div>
      <!-- 添加传感器信息 -->
      <!-- 传感器信息编辑 -->
       <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="saveForm" ref="saveForm">
            <el-form-item 
            label="传感器ldid" 
            prop="ldid" 
            :rules="[
                { required: true, message: '传感器唯一标识不能为空'}
            ]" label-width="20%">
                <el-input v-model="saveForm.ldid" style="width:85%"></el-input>
            </el-form-item>
            <el-form-item label="传感器类型" label-width="20%">
                <el-select v-model="saveForm.type" placeholder="请选择传感器类型" style="width:85%">
                    <el-option label="无" value=""></el-option>
                    <el-option
                    v-for="item in types"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="传感器名称" prop="name" label-width="20%">
                <el-input v-model="saveForm.name" style="width:85%"></el-input>
            </el-form-item>
            <el-form-item label="传感器描述" label-width="20%">
                <el-input v-model="saveForm.desc" style="width:85%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEdit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="border:1px solid #DCDFE6;padding: 10px;">
        <el-form-item label="传感器ldid">
            <el-input v-model="queryForm.ldid" placeholder="请输入传感器id"></el-input>
        </el-form-item>
        <el-form-item label="传感器名称">
            <el-input v-model="queryForm.name" placeholder="请输入传感器名称"></el-input>
        </el-form-item>
        <el-form-item label="类型">
            <el-select v-model="queryForm.type" placeholder="请选择类型">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">{{item.name}}</el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
       </el-form>
       <!-- 显示区域 -->
       <el-container style="border:1px solid #DCDFE6;padding: 10px;margin-top:10px">
           <el-table
            :data="listSeneors"
            stripe
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            label="传感器ldid"
            width="253">
            <template slot-scope="scope">
                <span >{{ scope.row.ldid }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="传感器名称"
            width="220">
            <template slot-scope="scope">
                 <span>{{scope.row.name}}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="传感器描述"
            width="450">
            <template slot-scope="scope">
                 <span>{{scope.row.desc}}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="传感器类型"
            width="140">
            <template slot-scope="scope">
                <span>{{scope.row.typeName}}</span>
            </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="160">
                <template slot="header">
                    <el-button
                    size="medium"
                    type="primary"
                    plain
                    @click="handleAdd()">添加传感器</el-button>
                </template>
                <template slot-scope="scope">
                     <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popover
                    placement="top"
                    width="160"
                    trigger="click"
                    v-model="scope.row.visible">
                    <p>您确定要删除吗？删除该传感器将会删除传感器的所有数据，请谨慎操作</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                    </div>
                    <el-button 
                    style="margin-left:20px"
                    slot="reference"
                    size="mini"
                    type="danger">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
       </el-container>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSize">
        </el-pagination>
  </div>
</template>

<script>
import Qs from 'qs';
export default {
    data(){
        return{
            formTitle:"修改传感器信息",
            dialogFormVisible:false, // 是否显示修改或添加窗口
            currentPage:1, // 当前页
            pageSize:10,//页面大小
            dataSize:400,// 数据总数
            queryForm:{// 查询条件
                ldid:"",
                name:"",
                type:"",
                current:1,
                size:10
            },
            saveForm:{status: 0},//需要保存或修改的传感器信息
            types:[//传感器类型信息
            ],
            listSeneors:[{
                id:1,
                ldid:"1chjgdvuskduhvyfdubhdukfhdfgkjf",
                name:"梁汉强的温度传感器1",
                desc:"这是一个温度传感器，位置在江西瑞金",
                "type":"温度传感器",
                status:0
                },{
                id:2,
                ldid:"1chjgdvuskduhvyfdubhdukfhdfgkjf",
                name:"梁汉强的湿度传感器1",
                desc:"这是一个湿度传感器，位置在江西瑞金",
                "type":"湿度传感器",
                status:0
                }
                ],
            rules: {
                ldid: [
                    { required: true, message: '请输入传感器惟一标识', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入传感器名称', trigger: 'blur' }
                ]
            }
        }
    },created(){
        this.onSubmit();
        this.getSensorTypes();
    },
    methods:{
        //添加传感器
        handleAdd(){
            this.dialogFormVisible = true;
            this.formTitle = "添加传感器";
            this.saveForm = {};
        },
        handleEdit(index, row){
            this.dialogFormVisible = true;
            this.formTitle = "修改传感器";
            this.saveForm = Object.assign({},row);
        } ,
        //提交查询
        async onSubmit() {
             const res = await this.$http.get("/sensordetail/listSeneors",{params:this.queryForm})
             if(res.data.code == 200){
                 this.listSeneors=res.data.data.records;
                 this.dataSize =res.data.data.total;
             }else{
                 this.$message.error(res.data.msg);
             }
        },
        // 提交修改或保存
        async updateEdit(){
            this.$refs["saveForm"].validate(async (valid) => {
                if (valid) {
                    const res = await this.$http.post("/sensordetail/saveSensorDetail",Qs.stringify(this.saveForm))
                    if(res.data.code === 200){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        // 刷新当前页面
                        this.onSubmit();
                    }else{
                        this.$message.error(res.data.msg);
                    }
                } else {
                    return false;
                }
            });
        },
        // 删除按钮
        async handleDelete(index,row){
            row.visible = false;
            // 通过删除按钮根据id删除传感器数据
            const res = await this.$http.post("/sensordetail/deleteSensor",Qs.stringify({id:row.id}))
            if(res.data.code === 200){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.onSubmit();
            }else{
                this.$message.error(res.data.msg);
            }
        },
         // 每叶总数改变
        handleSizeChange(val) {
             this.queryForm.size  = val;
             this.onSubmit();
        },
        //当前页
        handleCurrentChange(val) {
            this.queryForm.current = val;
            this.onSubmit();
        },
        //获取传感器类型信息
        async getSensorTypes(){
            const res = await this.$http.get("/sensortype/getSensorTypes")
            this.types=res.data.data;
        }
        
    }
}
</script>

<style>

</style>